import Vue from 'vue'
import VueRouter from 'vue-router'
// 练习导入的组件
import usevant from './../views/usevant.vue'
import usevant2 from './../views/usevant2.vue'
import test from './../views/test.vue'

import login from './../views/login/index.vue'
import home from './../views/home/index.vue'
import find from './../views/home/find/index.vue'
import my from './../views/home/my/index.vue'
import question from './../views/home/question/index.vue'
import info from './../views/home/info/index.vue'
import editinfo from './../views/home/info/editinfo.vue'
import shareList from './../views/home/shareList/index.vue'
import searchdata from './../views/home/searchdata/index.vue'
import xiangqingshare from './../views/home/xiangqingshare/index.vue'
import market from './../views/home/market/index.vue'
import interview from './../views/home/interview/index.vue'

import { getToken } from './../utils/token'
import { Toast } from 'vant'
import store from './../store/index' // 导入存有store数据的包
import { getUsrinfoBytoken } from './../api/login'

Vue.use(VueRouter)

const routes = [
  // 练习用的路由
  {
    path: '/usevant',
    component: usevant,
    children: [{ path: 'test', component: test }]
  },
  {
    path: '/usevant2',
    component: usevant2
  },

  // 以下不是练习用的了
  { path: '/', redirect: '/login' },
  { path: '/login', component: login },
  {
    path: '/home',
    redirect: '/my',
    component: home,
    children: [
      {
        path: '/find',
        component: find,
        meta: {
          needTab: true
        }
      },
      {
        path: '/my',
        component: my,
        meta: {
          needLogin: true, // 我的页面需要登录,添加一个路由元信息登陆标记
          needTab: true
        }
      },
      {
        path: '/question',
        component: question,
        meta: {
          needLogin: true, // 刷题页面需要登录,添加一个路由元信息登陆标记
          needTab: true
        }
      },
      {
        path: '/info',
        component: info,
        meta: {
          needLogin: true // 刷题页面需要登录,添加一个路由元信息登陆标记
        }
      },

      {
        path: '/editinfo',
        component: editinfo,
        meta: {
          needLogin: true // 刷题页面需要登录,添加一个路由元信息登陆标记
        }
      },
      // 面经分享详情列表页面
      {
        path: '/shareList',
        component: shareList
      },
      // 关键字搜索页面
      {
        path: '/searchdata',
        component: searchdata
      },
      // 分享的数据的详情页面
      {
        path: '/xiangqingshare/:id',
        component: xiangqingshare,
        needUser: true
      },
      {
        path: '/market',
        component: market
      },
      {
        path: '/interview/:type/:city',
        component: interview
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

// 前置导航守卫 -- 执行页面跳转之前,我们追加一些判断
router.beforeEach(async (to, from, next) => {
  // console.log(to) // 要去的路由
  // console.log(from) // 从哪里的路由
  // next() // 允许向下执行

  // 记录跳转前的滚动条的位置 -- 给跳转前的路由设置一个meta属性,用于记录滚动条位置
  from.meta.scrollTop =
    document.documentElement.scrollTop ||
    window.pageYOffset ||
    document.body.scrollTop // || 符号是为了兼容性问题

  // 获取token
  const token = getToken('token')

  // 跳转到的路由to 中的路由元标识
  const needLogin = to.meta.needLogin
  const needUser = to.meta.needUser

  // 1.判断跳转到的页面是否需要含有登录标识meta中的needLogin
  if (needLogin) {
    // 2.如果有needLogin
    // 判断是否含有token
    if (token) {
      // 如果有token,先判断一下,这个vue组件中是否含有存在store中的用户信息
      if (store.state.isLogin) {
        // 如果有,向下继续执行
        next()
      } else {
        // 如果没有,则根据用户token发起获取用户信息的请求
        // 请求成功后,将用户数据储存到vuex的state中,将用户的登陆状态改为true
        const res = await getUsrinfoBytoken(token)
        console.log(res)
        store.commit('setUser', res.data.data)
        store.commit('setIslogin', true)
        // 继续向下执行
        next()
      }
    } else {
      // 如果没有token,提示用户重新登陆,并跳回登录页
      Toast.fail('对不起,请您先登录呢!')
      console.log('to', to)
      console.log('from', from)
      next('/login?_redirect=' + to.fullPath)
    }
  } else {
    // 2.如果没有needLogin,则访问此页面就不需要登录,直接向下面执行路由跳转
    if (needUser) {
      if (token) {
        store.dispatch('setUserinfo')
        store.commit('setIslogin', true)
      }
    }
    next()
  }
})

// 后置守卫 -- 所有的路由跳转后要执行的代码
router.afterEach((to, from) => {
  // 直接滚动到页面的顶部 --
  window.scrollTo(0, 0)
})

export default router
